<template>
    <div>
      <Affix>
        <div class="page-header shadow">
          <span class="pull-left title">小学-三年级-陈辰老师班</span>
          <div class="pull-right">
            <ul>
              <li>
                <Poptip
                  confirm
                  title="您确定要离开？"
                  placement="bottom-end"
                >
                  <Button type="text" icon="android-exit" size="small">离开班级</Button>
                </Poptip>
              </li>
              <li><Button type="text" icon="ios-redo" size="small">加入班级</Button></li>
              <li>
                <Poptip
                  confirm
                  title="删除后无法恢复哦!"
                  placement="bottom-end"
                >
                  <Button type="text" icon="ios-trash" size="small">删除班级</Button>
                </Poptip>
              </li>
            </ul>
          </div>
        </div>
      </Affix>

      <Card style="width:100%; margin-top: 15px;" dis-hover>
        <p slot="title">
          <span>老师列表 (11)</span>
        </p>
        <div>
          <Row :gutter="10">
            <Col span="3" v-for="(item, index) in teacher" :key="index">
              <UserInfo
                :avatar="item.avatar"
                :name="item.name"
                :num="item.num"
                :sex="item.sex"
                :role="item.role"
              />
            </Col>
          </Row>
        </div>
      </Card>


      <Card style="width:100%; margin-top: 15px;" dis-hover class="has-btn-card right-btn-card">
        <p slot="title">
          <span>学生列表 (11)</span>
        </p>
        <div slot="extra">
          <Input placeholder="查找当前学生(账号/名称)" style="width: 180px; margin-right: 10px;"></Input>
          <Select style="width: 170px" placeholder="全部学生" class="action-select">
            <Option value="1">全部学生</Option>
            <Option value="3">
              <span>户外拓展</span>
              <span style="float:right;color:#888">
                <Icon type="edit" class="select-icon" @click.native.stop.prevent="handleDelAnswer()"></Icon>
                <Icon type="close" class="select-icon" @click.native.stop.prevent="handleDelAnswer()"></Icon>
              </span>
            </Option>
            <!--<OptionGroup label="操作">-->
              <!--<Option value="3">添加分组方案</Option>-->
            <!--</OptionGroup>-->
          </Select>
          <Button type="text">创建学生</Button>
          <Button type="text">添加学生</Button>
          <!--<Button type="text">下载用户导入模板</Button>-->
          <!--<Button type="text">批量导入学生</Button>-->
          <Button type="text">导出学生列表</Button>
        </div>
        <div>
          <Row :gutter="10">
            <Col span="3" v-for="(item, index) in student" :key="index">
              <UserInfo
                :avatar="item.avatar"
                :name="item.name"
                :num="item.num"
                :sex="item.sex"
                isHandle
              />
            </Col>
          </Row>
        </div>
      </Card>

    </div>
</template>
<script>
  import UserInfo from '../components/UserInfo'
  export default{
    components: {
      UserInfo
    },
    data() {
      return {
        student: [{
          avatar: '../../static/img/stu_avatar_m1.png',
          name: '乔布斯',
          num: 'WH287308',
          sex: 1
        }, {
          avatar: '../../static/img/stu_avatar_m1.png',
          name: '库克',
          num: 'WH201928',
          sex: 1
        }],
        teacher: [{
          avatar: '../../static/img/stu_avatar_m1.png',
          name: '',
          num: 'T932838',
          role: '班主任',
          sex: 1
        }, {
          avatar: '../../static/img/stu_avatar_m1.png',
          name: '蔡文',
          num: 'T829392',
          sex: 0
        }]
      }
    },
    methods: {
      handleDelAnswer() {
        console.log('ds')
      }
    }
  }
</script>
<style scoped>
  .action-select .ivu-select-item{
    height: 30px;
    line-height: 30px;
    padding: 0px;
    padding-left: 15px;
  }
  .select-icon{
    display: inline-block;
    margin-left: 5px;
    height: 30px;
    line-height: 30px;
    width: 20px;
    font-size: 14px;
  }
</style>
